<template>
  <div class="Shouye">
    <!-- 搜索后出现的框 -->
    <van-popup
      v-model="show"
      closeable
      close-icon="close"
      position="bottom"
      :style="{ height: '50%' }"
    >
      <div class="product">
        <div class="products" v-for="(value, index) in eachdata" :key="index">
          <div class="pro-box">
            <div class="pro-img" @click="toggles(value)">
              <img class="auto-img" :src="value.smallImg" alt />
            </div>
            <div class="pro-info">
              <div class="pro-text fl">
                <div class="ch-name">{{ value.name }}</div>
                <p class="desc">{{ value.desc }}</p>
                <div class="pro-price">
                  ￥{{ value.price }}
                  <div class="plus fr" @click="toggles(value)">
                    <div>+</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <!-- 头部 -->
    <div class="shouye-title">
      <van-nav-bar>
        <template #left>{{ timeText }},啊sir</template>

        <template #right>
          <van-search
            v-model="value"
            shape="round"
            background="#ffffff"
            @blur="each"
            placeholder="请输入搜索关键词"
          />
        </template>
      </van-nav-bar>
      <!-- 轮播区 -->
      <van-swipe :autoplay="3000">
        <van-swipe-item
          v-for="(value, index) in daydata"
          :key="index"
          @click="toggles(value)"
        >
          <img :src="value.bannerImg" />
          <div class="daydataname">{{ value.name }}</div>
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="shouye-header">
      <div class="shouye-banner">
        <div class="transparents"></div>
        <van-nav-bar>
          <template #right>
            <div>
              <p>Hi,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Jack</p>
              <p>咖啡会让你脑洞大开</p>
            </div>
          </template>
        </van-nav-bar>

        <div class="mode">
          <div class="pick-up" @click="gocaidan">
            <div>自提</div>
            <div class="iconfont">&#xe798;</div>
          </div>
          <div class="take-out" @click="gocaidan">
            <div>外卖</div>
            <div class="iconfont">&#xe6bb;</div>
          </div>
        </div>
        <!-- 每日推荐区 -->
        <div class="recommend">
          <h3>每日推荐</h3>
          <div class="auto">
            <div class="recommend-ban">
              <div
                v-for="(value, index) in tuijiandata"
                :key="index"
                @click="toggles(value)"
              >
                <img :src="value.smallImg" />
                <h4>{{ value.name }}</h4>
                <p class="desc">{{ value.desc }}</p>
                <p class="price">{{ value.price }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getbannerDataAPI,
  getHotProductsAPI,
  eachProductsAPI
} from '@/api/user'
import '../../assets/less/Shouye.less'
export default {
  name: 'Shouye',
  data () {
    return {
      show: false,
      // 搜索到的商品
      eachdata: '',
      value: '',
      // 推荐列表
      daydata: [],
      // 推荐列表
      tuijiandata: [],
      timeText: ''
    }
  },
  created () {
    this.getTime()
    this.getbannerData()
    this.getHotProducts()
  },
  methods: {
    gocaidan () {
      this.$router.push({ name: 'Caidan' }) // 去菜单栏
    },
    getTime () {
      const hours = new Date().getHours()
      if (hours >= 6 && hours < 12) {
        this.timeText = '早上好'
      } else if (hours >= 12 && hours < 18) {
        this.timeText = '下午好'
      } else if (hours >= 18 && hours < 24) {
        this.timeText = '晚上好'
      } else {
        this.timeText = '深夜好'
      }
    },
    // 获取每日推荐
    async getbannerData () {
      const res = await getbannerDataAPI({ appkey: this.$store.state.appkey })
      this.daydata.push(...res.result)
    },
    // 获取推荐商品数据
    async getHotProducts () {
      const res = await getHotProductsAPI({
        appkey: this.$store.state.appkey,
        key: 'isHot',
        value: 1
      })
      this.tuijiandata = res.result
    },
    // 点击商品跳转到详情，并将商品单独的pid通过query传过去
    toggles (value) {
      const pid = value.pid
      this.$router.push({ name: 'Detail', query: { pid } })
    },
    // 查找商品
    async each () {
      if (this.value !== '') {
        // 当搜索栏为空则不触发接口
        const res = await eachProductsAPI({
          appkey: this.$store.state.appkey,
          name: this.value
        })
        if (res.code === 'Q001') {
          if (res.result.length === 0) {
            this.$toast('没有搜到商品')
            return
          }
        }
        this.eachdata = res.result
        this.show = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
@font-face {
  font-family: 'iconfont';
  src: url('../../assets/font/iconfont.ttf') format('truetype');
}

.text {
  font-size: 10px;
}

.iconfont {
  font-family: 'iconfont' !important;
  font-size: 32px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
